<template>
	<v-chart :option="chartOptions" autoresize style="height: 300px;" />
</template>

<script setup>
import { computed } from 'vue'
import VChart from 'vue-echarts'

const props = defineProps({ data: Object })

const chartOptions = computed(() => ({
	title: { text: '设备能耗占比', left: 'center' },
	tooltip: { trigger: 'item' },
	legend: {
		bottom: '0',
		data: props.data?.legend ?? []
	},
	series: [
		{
			name: '设备类型',
			type: 'pie',
			radius: '60%',
			data: Array.isArray(props.data?.legend)
				? props.data.legend.map((label, i) => ({
					name: label,
					value: props.data?.values?.[i] ?? 0
				}))
				: []
		}
	]
}))
</script>
